/*
*@header
*/
<template>
    <div class="my_header">
        <div class="left">
            <van-icon name="wap-nav" size="22" />
        </div>
        <div class="content">
            <div :class="{active:currentTab === 1}"@click="handleClick(1)">我的</div>
            <div :class="{active:currentTab === 2}"@click="handleClick(2)">发现</div>
            <div :class="{active:currentTab === 3}"@click="handleClick(3)">云村</div>
            <div :class="{active:currentTab === 4}"@click="handleClick(4)">视频</div>
        </div>
        <div class="right">
            <van-icon name="search" size="22" />
        </div>
    </div>
</template>
<script setup>
import {ref} from 'vue'
import router from '@/router'

let currentTab = ref(2)
const handleClick = (tab)=>{
    console.log(tab);
    currentTab.value = tab
    router.push({name: tab == 1 ? 'mine': tab == 2 ? 'discover' : tab == 3 ? 'yuncun':'vedio'})
}
</script>
<style scoped>
    .my_header{
        display: flex;
        justify-content: space-between;
    }
    .my_header .content{
        display: flex;
        width: 180px;
        justify-content: space-around;
    }
</style>